<template>
  <div v-loading="loadings" class="room-table">
    <el-table v-loading="loading" :data="data" border height="100%">
      <el-table-column label="人员编码" show-overflow-tooltip prop="userName" width="150px" fixed class-name="col-prop">
        <template slot-scope="scope"> {{ scope.row.userName }}({{ scope.row.userCode }}) </template>
      </el-table-column>
      <el-table-column v-for="index in mday" :key="year + index" :ddd="getDayNum" width="50">
        <!--  -->
        <template slot="header">
          {{ index }}
        </template>
        <template slot-scope="scope">
          <div v-for="(item, indexs) in scope.row.days[index - 1].statusVO" :key="indexs">
            <span>
              <i v-if="item == 'REST'" class="all-span" />
              <i v-if="item == 'ALL'" class="full-span" />
              <el-tooltip class="item" effect="light" placement="top-start">
                <div slot="content">
                  {{ scope.row.userName }}<span class="topBtn">请假</span><br />
                  <span>
                    {{ scope.row.days[index - 1].day.substring(0, scope.row.days[index - 1].day.indexOf(" ")) }}</span>
                </div>
                <i
                  v-if="
                    item == 'LEAVE' &&
                    scope.row.days[index - 1].statusVO.am == 'half-full' &&
                    scope.row.days[index - 1].statusVO.pm == 'half-full'
                  "
                  class="leave-span"
                  @click="clickLeave(scope.row, scope.row.days[index - 1].statusVO)"
                />
                <i
                  v-if="
                    item == 'LEAVE' &&
                    scope.row.days[index - 1].statusVO.am == 'half-full' &&
                    scope.row.days[index - 1].statusVO.pm == null
                  "
                  class="leaveam-span"
                  @click="clickLeave(scope.row, scope.row.days[index - 1].statusVO)"
                />
                <i
                  v-if="
                    item == 'LEAVE' &&
                    scope.row.days[index - 1].statusVO.am == null &&
                    scope.row.days[index - 1].statusVO.pm == 'half-full'
                  "
                  class="leavepm-span"
                  @click="clickLeave(scope.row, scope.row.days[index - 1].statusVO)"
                />
              </el-tooltip>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="请假详情1"
      :visible.sync="dialogVisible"
      width="40%"
      custom-class="dialog-demo"
      :before-close="handleClose"
    >
      <el-form ref="adjustRoomForm" :model="leaveform" label-width="auto">
        <div class="form-col2">
          <el-form-item label="请假人姓名">
            <div class="option-item">
              <el-input v-model="leaveform.input" placeholder="请输入内容" disabled />
            </div>
          </el-form-item>
          <el-col :span="24">
            <el-form-item label="请假时段">
              <!-- <el-input
                v-model="leaveform.time"
                style="width:300px"
                placeholder="请输入内容"
                disabled
              ></el-input> -->
              <el-date-picker
                v-model="leaveform.time"
                disabled
                class="ui-w378"
                :picker-options="{
                  disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                  }
                }"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </div>
        <el-form-item label="请假原因">
          <el-input
            v-model="leaveform.adjustReason"
            disabled
            type="textarea"
            :rows="2"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
  import roomMixin from "../RoomDate/room-mixin.js"; // 引入mixin文件
  import { checkLeave } from "../../../api/api";
  export default {
    name: "City",
    // 引入混淆
    mixins: [roomMixin],
    // 引入组件
    props: {
      data: {
        types: Object,
        defalt: {}
      },
      year: {
        types: String
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    // import引入的组件需要注入到对象中才能使用
    data() {
      // 这里存放数据
      return {
        mday: 0,
        loadings: false,
        dialogVisible: false,
        leaveform: {
          input: "",
          time: "",
          adjustReason: ""
        }
      };
    },
    // 监控data中的数据变化
    watch: {
      data(val) {
        this.mday = 0;
        console.log("val", val);
        this.mday = val[0].days.length;
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 方法集合
    methods: {
      clickLeave(e, r) {
        this.leaveform.input = e.userId;
        console.log('=====33=====');
        this.checkLeaveFn(r);
      },
      handleClose() {
        this.dialogVisible = false;
      },
      async checkLeaveFn(row) {
        try {
          const params = {
            postCalendarLeaveId: row.postCalendarLeaveId
          };
          const res = await checkLeave(params);
          if (res.success) {
            this.leaveform.time = [res.data.leaveStartTime, res.data.leaveEndTime];
            this.leaveform.adjustReason = res.data.reason;
            this.$emit("fatherMethod", this.leaveform);
          } else {
            this.$message({
              type: "warning",
              message: res.message,
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "warning",
            message: "获取数据失败，稍后再试",
            single: true
          });
        }
      }
    }
  };
</script>
<style lang="scss">
  $siteVerify: #f466c1 !default; // 场地待审
  $verify: #ff4800 !default; // 交易待审
  $prepare: #f7c069 !default; // 备用
  $full: #2f93ff !default; // 约满#00dbe4
  $half-full: #6dd400 !default; // 约满#00dbe4
  $not: #f7c069 !default; //不可用
  $rest: #efefef !default; // 休息
  $rest-border: #dedede !default; // 休息
  .table-body::-webkit-scrollbar {
    width: 8px;
    background-color: #f5f5f5;
  }
  .topBtn {
    display: inline-block;
    width: 30px;
    height: 15px;
    color: #f7c069;
    text-align: center;
    border: 1px solid #f7c069;
    line-height: 15px;
    border-radius: 4px;
    margin-left: 2px;
  }
  .full-span {
    display: inline-block;
    height: 30px;
    width: 100%;
    background: #1890ff;
    opacity: 0.2;
    color: #1890ff;
    border: 1px dashed #e5e5e5;
  }
  .leave-span {
    display: inline-block;
    height: 30px;
    width: 100%;
    background: #f7c069;
    color: #f7c069;
    border: 1px dashed #e5e5e5;
  }
  .leaveam-span {
    display: inline-block;
    height: 15px;
    width: 100%;
    margin-bottom: 14px;
    background: #f7c069;
    color: #f7c069;
    border: 1px dashed #e5e5e5;
  }
  .leavepm-span {
    display: inline-block;
    height: 15px;
    width: 100%;
    margin-top: 14px;
    background: #f7c069;
    color: #f7c069;
    border: 1px dashed #e5e5e5;
  }
  .all-span {
    display: inline-block;
    height: 30px;
    width: 100%;
    background-color: $rest;
    border-color: $rest-border;
    /*设置背景渐变*/
    border: 1px dashed #e5e5e5;
    background: linear-gradient(
      -45deg,
      #e1e1e1 15%,
      #fff 0,
      #fff 25%,
      #fff 0,
      #fff 50%,
      #e1e1e1 0,
      #e1e1e1 65%,
      #fff 0,
      #fff 75%,
      #fff 0
    );
    /*线性渐变的宽度*/
    background-size: 5px 5px;
    z-index: 999;
  }
  .table-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }
  .table-body::-webkit-scrollbar-thumb {
    height: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }
  .scrollbar-table {
    .pd10 {
      display: inline-block;
      padding: 10px;
    }
    li:nth-child(even) {
      background-color: #e5e5e5;
    }
    .table-body {
      max-height: 100px;
      overflow: auto;
    }
  }
</style>
